<template>
  <div class="SearchProcucts-container">
    <van-dropdown-menu>
      <van-dropdown-item  title="综合" disabled/>
      <van-dropdown-item  title="价格" v-model="priceVal" :options="option2" @change="priceChange"/>
      <van-dropdown-item  @change="categorychange" title="分类" v-model="categoryval" :options="filterCategory" />
    </van-dropdown-menu>
    <van-empty v-if="goodsList.length===0" image="search" description="描述文字" />
    <Products
    v-else
    :goodsList="goodsList"
    :filterCategory="filterCategory"
    ></Products>
  </div>
</template>

<script>
import Products from '@/components/Products.vue'
export default {
  props: ['goodsList', 'filterCategory'],
  data() {
    return {
      // value1: 0,
      priceVal: 'desc',
      // 分类勾选状态根据数据的value（就是后台返回过来的id值）值进行判断
      categoryval: '',
      // option1: [
      //   { text: '全部商品', value: 0 },
      //   { text: '新款商品', value: 1 },
      //   { text: '活动商品', value: 2 }
      // ],
      option2: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' }
      ]

    }
  },
  methods: {
    categorychange(val) {
      // val是商品分类id
      // console.log(val)
      this.$emit('categorychange', val)
    },
    priceChange(val) {
      // val是价格排序
      // console.log(val)
      this.$emit('priceChange', val)
    }
  },
  // 在页面跟新钩子函数周期,遍历filterCategory判断里面的checked值把value返给categoryval，根据双向绑定判断勾选状态
  beforeUpdate() {
    this.filterCategory.map(item => {
      if (item.checked) {
        this.categoryval = item.value
      }
    })
  },
  components: {
    Products
  }
}
</script>

<style>

</style>
